<template>
	<view class="all">
		<image class="logo" src="../../static/logo.png"></image>
		<view class="new">
			<view class="new_box" style="margin-top: 20upx;">
				<input placeholder="请输入手机号" @input="phone_input" type="number" maxlength="11" class="new_box_input" />
				<view class="new_box_text" v-if="showText_now==true" @click.stop="code_tap">获取验证码</view>
				<view v-if="showText_now!=true" class="new_box_text" style="text-align: right;">{{second_now}}s</view>
			</view>
			<view class="new_box" style="margin-top: 20upx;">
				<input placeholder="请输入验证码" @input="code_input" type="number" maxlength="6" class="new_box_input" />
			</view>
			<view class="new_box" style="margin-top: 20upx;">
				<input placeholder="请输入新交易密码" @input="password_input" password class="new_box_input" />
			</view>
		</view>
		<button class="anniu"  @tap="user_password_api">修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				second_now:60,
				showText_now:true,
				phone:'',
				code:'',
				pay_password:''
			}
		},
		methods: {
			code_tap() {
				if( this.phone != '' && this.phone.length == 11 ) {
					this.showText_now = false
					this.acquire_api(this.phone) //获取验证码
					var interval = setInterval(() => {
					    let times = --this.second_now
					    this.second_now = times<10?'0'+times:times //小于10秒补 0
					}, 1000)
					setTimeout(() => {
					    clearInterval(interval)
					    this.second_now=60
					    this.showText_now = true
					}, 60000)
				}else{
					uni.showToast({
						title: '请输入正确手机号',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			acquire_api(phone) {
				var that = this
				that.$request(that.$Api.sms, {
					access_token: uni.getStorageSync('access_token'),
					phone:phone,
				}, "POST").then(res => {
					if (res.data.code == 0) {
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			password_input(num) {
				this.pay_password = num.detail.value
			},
			code_input(num) {
				this.code = num.detail.value
			},
			phone_input(num) {
				this.phone = num.detail.value
			},
			//首页
			user_password_api() {
				var that = this
				if( that.phone != '' && that.code != '' && that.pay_password != '' ) {
					that.$request(that.$Api.user_password_api, {
						access_token: uni.getStorageSync('access_token'),
						phone:that.phone,
						code:that.code,
						pay_password:that.pay_password,
					}, "POST").then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
							setTimeout(function () {
								uni.navigateBack()
							}, 2000);
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					})
				}else{
					uni.showToast({
						title: '请填写完整',
						duration: 2000,
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style lang="less">
	page{
		background: #FFFFFF;
		overflow-x: hidden;
		.all{
			width: 750upx;
			.logo{
				width: 344upx;
				height: 344upx;
				margin-top: 26upx;
				margin-left: 203upx;
			}
			.anniu{
				width: 670upx;
				height: 96upx;
				background: #A02731;
				border-radius: 48upx;
				margin-top: 58upx;
				margin-left: 40upx;
				text-align: center;
				line-height: 96upx;
				font-size: 34upx;
				color: #FFFFFF;
			}
			.anniu_new{
				width: 670upx;
				height: 96upx;
				background: #C7CFCB;
				border-radius: 48upx;
				margin-top: 58upx;
				margin-left: 40upx;
				text-align: center;
				line-height: 96upx;
				font-size: 34upx;
				color: #FFFFFF;
			}
			.agreement{
				display: flex;
				margin-top: 40upx;
				margin-left: 60upx;
				.agreement_image{
					width: 30upx;
					height: 30upx;
					margin-top: 3upx;
				}
				.agreement_text{
					margin-left: 30upx;
					height: 36upx;
					font-size: 26upx;
					font-weight: 400;
					color: #999999;
					line-height: 36upx;
				}
			}
			.all_bj{
				width: 520upx;
				height: 388upx;
				position: fixed;
				bottom: 0;
				margin-left: 115upx;
			}
			.new{
				width: 700upx;
				padding: 0;
				margin-left: 25upx;
			}
			.new_box{
				width: 700upx;
				padding: 14upx 0;
				border-bottom: 1upx solid #DDDDDD;
				display: flex;
			}
			.new_box_image{
				width: 52upx;
				height: 54upx;
			}
			.new_box_input{
				margin-left: 8upx;
				margin-top: 8upx;
				width: 478upx;
				height: 40upx;
				font-size: 28upx;
				font-weight: 400;
				color: #222222;
				line-height: 40upx;
			}
			.new_box_text{
				width: 140upx;
				height: 40upx;
				font-size: 28upx;
				font-weight: 400;
				color: #6B542A;
				line-height: 40upx;
			}
			.zhuche{
				text-align: center;
				font-size: 28upx;
				color: #007AFF;
				padding: 20upx 0;
				width: 100%;
			}
		}
	}
</style>
